<template>
  <!-- 遮盖 -->
  <div class="bg_mask"></div>
  <div class="main">
    <!-- 登录窗口 -->
    <div class="login-box">
      <div class="login-title">登录</div>
      <div class="login_ipt">
        <input placeholder="账号" type="text" v-model="loginData.username" />
        <input
          placeholder="密码"
          type="password"
          v-model="loginData.password"
        />
      </div>
      <div class="login-btn" @click="login">登录 / 注册</div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import axios from "@/utils/axios";
import { localSet } from "@/utils/index";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      loginData: {
        grant_type: "password",
        client_id: "2",
        client_secret: "YB0COWApYNgFLNyfXoE3oC26PBa1xQ3mETsxMKdH",
        username: "",
        password: "",
      }, //登录数据
    });
    // onMounted(() => {
    //   getBase();
    // });
    // const getBase = () => {
    //   let httpOption = axios.post;
    //   let params = "";
    //   httpOption("/api/admin/juejin", params).then((res) => {
    //     console.log(res);
    //     if (res.code == 200) {
    //       ElMessage.success(res.reason.err_msg);
    //     } else ElMessage.error(res.reason.err_msg);
    //   });
    // };
    //登录
    const login = () => {
      if (state.loginData.username && state.loginData.password) {
        let httpOption = axios.post;
        let params = {
          ...state.loginData,
        };
        httpOption("/api/admin/authorizations", params)
          .then((res) => {
            localSet("token", `Bearer ${res.access_token}`);
            ElMessage.success("ok");
            setTimeout(() => {
              router.push("/ghost");
            }, 1000);
          })
          .catch((err) => console.log(err));
      } else {
        ElMessage.error("error");
      }
    };
    return {
      login,
      ...toRefs(state),
    };
  },
};
</script>


<style lang="scss" scoped>
.main {
  width: 100%;
  height: 90vh;
  // background: url(@/assets/login-bg.png);
  background-size: 100% 100%;
  padding-top: 100px;
  position: relative;
  .login-box {
    width: 500px;
    height: 300px;
    background: #fafafa;
    border-radius: 5px;
    margin: 150px auto;
    box-shadow: 0px 10px 16px rgb(211, 208, 208);
    .login-title {
      width: 70px;
      font-family: "cl";
      font-size: 26px;
      font-weight: bold;
      padding: 20px 0 10px 20px;
      margin-left: 20px;
      border-bottom: 4px solid #ccc;
    }
  }
  .login_ipt {
    width: 91%;
    margin: 0 auto;
    margin-top: 20px;
    input {
      display: block;
      border: none;
      outline: none;
      background: none;
      width: 100%;
      height: 50px;
      font-size: 16px;
      font-family: "cl";
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
  }
  .login-btn {
    width: 60%;
    height: 40px;
    line-height: 40px;
    font-family: "cl";
    font-size: 16px;
    color: rgb(218, 160, 160);
    margin: 0 auto;
    background: #ccc;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
  }
  .login-btn:hover {
    background: #000;
    color: #fff;
  }
}
</style>